import React from 'react';
import {injectIntl} from './intl';
import PropTypes from 'prop-types';
import {Form, Row, Modal, message} from 'antd';
import TextInput from 'Shared/components/TextInput';
import {
    FORM_ROW_OPTIONS,
} from '../constants';
const FormItem = Form.Item;
const autosize = {minRows: 1};
import {validateRepairMode} from './utils';
class RepairModeEdit extends React.PureComponent {
    static getDerivedStateFromProps(props, state) {
        if(state.isDefault && props.showPanel)
            return {
                code: props.detail.code,
                name: props.detail.name,
                description: props.detail.description,
                rowVersion: props.detail.rowVersion,
                id: props.detail.id,
                isDefault: false,
            };
        if(!props.showPanel)
            return {
                loading: false,
                id: '',
                code: '',
                name: '',
                rowVersion: '',
                description: '',
                isDefault: true,
                isValidate: false,
            };
        return null;
    }
    state = {
        loading: false,
        id: '',
        code: '',
        name: '',
        rowVersion: '',
        description: '',
        isDefault: true
    };
    componentDidMount() {
        this.ismounted = true;
    }

    componentWillUnmount() {
        this.ismounted = false;
        Modal.destroyAll();
    }

    handleFilterChange = (value, name) => {
        this.setState({
            [name]: value
        });
    }

    onCancel = () => {
        this.setState({
            code: '',
            name: '',
            rowVersion: '',
            description: '',
            id: '',
            isValidate: false,
        });
    }
    onSubmit = () => {
        const {name, description, code, id, rowVersion} = this.state;
        const result = validateRepairMode(this.state);
        if(result) {
            this.setState({
                isValidate: true,
            });
            return message.warn(result);
        }
            
        this.setState({
            loading: true
        });
        return this.props.onSubmit({
            id,
            name,
            code,
            description,
            rowVersion
        }).then(() => {
            this.setState({
                loading: false,
            });
        });
    }
    render() {
        return (
            <div>
                <Modal
                    title={this.state.id ? this.props.intl.formatMessage({
                        id: 'repairModeEdit.modale.edit.title',
                        defaultMessage: '编辑维修模式'
                    }) : this.props.intl.formatMessage({
                        id: 'repairModeEdit.modale.add.title',
                        defaultMessage: '新增维修模式'
                    })}
                    width="40%"
                    maskClosable={false}
                    onOk={this.onSubmit}
                    destroyOnClose={true}
                    confirmLoading={this.state.loading}
                    visible={this.props.showPanel}
                    onCancel={this.props.onCancel}>
                    <Form className="form-standard">
                        <Row>
                            <FormItem
                                label={this.props.intl.formatMessage({
                                    id: 'repairModeEdit.modale.form.code',
                                    defaultMessage: '编号'
                                })}
                                validateStatus={!this.state.id && this.state.isValidate && !this.state.code ? 'error' : null}
                                required={!this.state.id}
                                {...FORM_ROW_OPTIONS.item}>
                                {this.state.id ? this.state.code
                                    : <TextInput name="code"
                                        value={this.state.code} onBlur={this.handleFilterChange} />}
                            </FormItem>
                        </Row>
                        <Row>
                            <FormItem
                                validateStatus={!this.state.id && this.state.isValidate && !this.state.name ? 'error' : null}
                                required={!this.state.id}
                                label={this.props.intl.formatMessage({
                                    id: 'repairModeEdit.modale.form.name',
                                    defaultMessage: '名称'
                                })}
                                {...FORM_ROW_OPTIONS.item}>
                                {this.state.id ? this.state.name
                                    : <TextInput name="name"
                                        value={this.state.name} onBlur={this.handleFilterChange} />}
                            </FormItem>
                        </Row>
                        <Row>
                            <FormItem
                                label={this.props.intl.formatMessage({
                                    id: 'repairModeEdit.modale.description',
                                    defaultMessage: '描述'
                                })}
                                {...FORM_ROW_OPTIONS.item}>
                                <TextInput type="textarea" name="description" autosize={autosize}
                                    value={this.state.description} onBlur={this.handleFilterChange} />
                            </FormItem>
                        </Row>
                    </Form>
                </Modal>
            </div>
        );
    }
}

RepairModeEdit.propTypes = {
    detail: PropTypes.object,
    intl: PropTypes.object,
    showPanel: PropTypes.bool,
    onCancel: PropTypes.func,
    onSubmit: PropTypes.func
};
export default injectIntl(RepairModeEdit);
